<template>
<div>
    <el-row :gutter="20">
        <el-col :push="1">
        批量删除：<el-button type="danger" icon="el-icon-delete" circle @click="delBatch"></el-button>
        </el-col>
    </el-row>
  <el-tree :data="menus" :props="defaultProps" @node-click="handleNodeClick"
  :expand-on-click-node="false" node-key="catId" show-checkbox :default-expanded-keys="expandedKey"
  ref="menuTree">
        <span class="custom-tree-node" slot-scope="{ node, data }">
        <span>{{ node.label }}</span>
        <span>
          <el-button
            type="text"
            size="mini"
            v-if="node.level <= 2"
            @click="() => append(data)">
            Append
          </el-button>
          <el-button
            type="text"
            size="mini"
            @click="() => edit(data)">
            Edit
          </el-button>
          <el-button
            type="text"
            size="mini"
            v-if="node.childNodes.length == 0"
            @click="() => remove(node, data)">
            Delete
          </el-button>
        </span>
      </span>
  </el-tree>

  <el-dialog
  title="提示"
  :visible.sync="dialogVisible"
  width="30%">
  <el-form :model="category">
    <el-form-item label="分类名称" >
      <el-input v-model="category.name" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="分类图片" >
      <el-input v-model="category.icon" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="计量单位" >
      <el-input v-model="category.productUnit" autocomplete="off"></el-input>
    </el-form-item>
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="submitData">确 定</el-button>
  </div>
</el-dialog>
</div>

</template>

<script>
export default {
  data() {
    return {
      menus: [],
      doType:0,//0 是add，1是update
      category:{
          catId:null,
          name:"",
          parentCid:0,
          showStatus:1,
          sort:0,
          catLevel:0,
          icon:"",
          productUnit:"",

      },
      dialogVisible: false,
      expandedKey:[],
      defaultProps: {
        children: "children",
        label: "name",
      },
    };
  },
  methods: {
    handleNodeClick(data) {
        console.log(data);
    },
    getMenus() {
        this.$http({
            url: this.$http.adornUrl("/product/category/list/tree"),
            method: "get",
        }).then(({data}) => {
            // window.console.log(data);
            this.menus = data.data
        });
    },
    addCategory() {
        window.console.log(this.category)
        this.dialogVisible = false

        this.$http({
                url:this.$http.adornUrl("/product/category/save"),
                method:"post",
                data:this.$http.adornData(this.category,false)
            }).then(({data}) =>{
                //window.console.log(data)
                //重新获取菜单，并给与提示
                this.getMenus()
                this.$message({
                    type: 'success',
                    message: '添加成功!'
                });
                //打开上次操作的菜单
                this.expandedKey= [this.category.parentCid]
                //清空输入框数据
                this.category.name = ""
            }).catch(({err})=> {
                window.console.log(err)
                this.$message({
                    type: 'error',
                    message: '添加失败，可能是网络的问题!'
                });
            })
    },
    append(data) {
        window.console.log("append",data)
        this.dialogVisible = true
        this.category.parentCid = data.catId
        this.category.catLevel = (data.catLevel * 1) + 1
    },
    remove(node, data) {
        this.$confirm(`是否删除${data.name}?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
            let ids = [data.catId]
            // window.console.log(ids)
            this.$http({
                url:this.$http.adornUrl("/product/category/delete"),
                method:"post",
                data:this.$http.adornData(ids,false)
            }).then(({data}) =>{
                //window.console.log(data)
                this.getMenus()
                this.$message({
                    type: 'success',
                    message: '删除成功!'
                });
                this.expandedKey= [node.parent.data.catId]
            })
        }).catch(() => {
            this.$message({
                type: 'info',
                message: '已取消删除'
            });          
        });

    },
    edit(data) {
        //证明当前操作位update
        this.doType = 1
        //先把消息框给搞出来
        this.category.catId = data.catId
        window.console.log(data)
        this.$http({
            url:this.$http.adornUrl(`/product/category/info/${this.category.catId}`),
            method:"GET"
        }).then(({data}) => {
            window.console.log(data)
            this.category.name = data.data.name
            this.category.catId = data.data.catId
            this.category.icon = data.data.icon
            this.category.productUnit = data.data.productUnit
            this.category.parentCid = data.data.parentCid
            this.dialogVisible = true
        })
    },
    editCategory() {
        window.console.log("edit")
        let {name,catId,icon,productUnit} = this.category
        this.$http({
            url:this.$http.adornUrl("/product/category/update"),
            method:"POST",
            data:this.$http.adornData({name,catId,icon,productUnit},false)
        }).then(({data}) => {
            this.$message({
                    type: 'success',
                    message: '修改成功!'
            });
            this.category.name =""
            this.category.catId = null
            this.category.icon = ""
            this.category.productUnit = ""

            this.getMenus()
            this.dialogVisible = false
            //打开上次操作的菜单
            this.expandedKey= [this.category.parentCid]
        })
    },
    submitData(){
        if(this.doType == 0) {
            this.addCategory()
        }else if(this.doType == 1) {
            this.editCategory()
        }
    },
    delBatch() {
        let checekNodes = this.$refs.menuTree.getCheckedNodes();
        let delIds = []
        let delNames = []
        checekNodes.forEach(menu => {
            delIds.push(menu.catId)
            delNames.push(menu.name)
        });
        this.$confirm(`是否删除${delNames}?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(()=>{
            this.$http({
                url:this.$http.adornUrl("/product/category/delete"),
                method:"post",
                data:this.$http.adornData(delIds,false)
            }).then(()=>{
                this.getMenus();
            }).catch(()=>{
                this.$message({
                type: 'info',
                message: '已取消删除'
            });  
        })
        })
    },
  },
  created() {
      this.getMenus()
  },
};
</script>

<style>
</style>